<!-- 二次封装通用table -->
<template>
  <el-table 
    :data="tableData" 
    :stripe="tableAttr?.stripe"
    :border="tableAttr?.border"
    :size="tableAttr?.size"

    :default-expand-all="tableAttr?.expandAll"
    :row-key="tableAttr?.rowkey"
    :lazy="tableAttr?.lazy"
    :load="tableAttr?.load"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"

    :span-method="tableAttr?.spanMethod"

    :fit="tableAttr?.fit"
    :show-header="tableAttr?.showHeader"
    :highlight-current-row="tableAttr?.hlightCurRow"
    :default-sort="tableAttr?.defaultSort"
    :row-class-name="tableAttr?.rowclassname"
    :row-style="tableAttr?.rowstyle"
    :cell-class-name="tableAttr?.cellclassname"
    :empty-text="tableAttr?.emptytext"
    @row-click="tableAttr?.rowclick"
  >
    <!-- 数据列 -->
    <el-table-column 
      v-for="col in columns"
      :key="col.label" 
      :type="col.type" 
      :prop="col.prop" 
      :label="col.label"
      :width="col.width"
      :min-width="col.minwidth"
      :fixed="col.fixed"
      :formatter="col.formatter"
      :show-overflow-tooltip="col.showTooltip"
      :align="col.align"
      :header-align="col.headerAlign"
      :class-name="col.colClassName"
      :label-class-name="col.colHeaderClassName"
      :selectable="col.selectable"
      :reserve-selection="col.reserveSelection"
      :filters="col.filters"
      :filter-placement="col.filterPlace"
      :filter-multiple="col.filterMult"
      :filter-method="col.filterMethod"
      :filtered-value="col.filteredValue"
      :sortable="col.sortable"
    >
      <!-- 自定义表头 -->
      <template #header v-if="col.header">
        <slot :name="col.header"></slot>
      </template>
      <!-- 操作列、type列 -->
      <template #default="scope" v-if="col.slot ||col.type">
        <slot :name="col.slot" :scope="scope"></slot>

        <!-- 展开行 -->
        <!-- <template type="">
        </template> -->
      </template>
      
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    tableAttr: {
      type: Object,
      default: () => {
        return {
          stripe: false,
          border: false,
          size: 'default',
          fit: true,
          showHeader: true,
          hlightCurRow: false,
          emptytext: '暂无数据',

          expandAll: false,
          rowkey: (row: any) => {
            return row.id
          },
          lazy: true,
          load: ({ row, treeNode, resolve }: any) => {
            return { row, treeNode, resolve }
          },

          spanMethod: ({ row, column, rowIndex, columnIndex }: any) => {
            return { row, column, rowIndex, columnIndex }
          },

          defaultSort: {
            prop: '',
            order: 'ascending'
          },
          rowclassname: ({ row, rowIndex }: any) => {
            return ''
          },
          cellclassname: ({ row, rowIndex }: any) => {
            return ''
          },
          rowstyle: ({ row, rowIndex }: any) => {
          },
          rowclick: () => {
          }
        }
      }
    }
  },
  setup(props: any) {
    const tableData = ref(props.tableData)
    const columns = ref(props.columns)
    const tableAttr = ref(props.tableAttr)
    return {
      tableData,
      columns,
      tableAttr
    }
  },
})
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  margin-bottom: 20px;
}
</style>
